<template>
  <div>
    <div id="studentList">
      <div class="search clearfix">
        <h1 class="fl title">保险产品列表</h1>
        <div
          style="margin-bottom: 22px;"
          class="search-box"
        >
          <el-input
            placeholder="请输入查询内容"
            v-model="serachData.value"
            class="input-with-select"
          >
            <el-select
              v-model="serachData.type"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option
                label="名称"
                value="name"
              ></el-option>
              <el-option
                label="产品年限"
                value="year"
              ></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchEvent"
            ></el-button>
          </el-input>
        </div>
      </div>
      <template>
        <el-table
          :data="productsData.data"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="_id"
            label="产品编号"
            width="280"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="产品名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="产品价格"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="year"
            label="产品年限"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="classifyId.name"
            label="产品类别"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="imgURL"
            label="产品图片"
            width="150"
          >
            <template slot-scope="scope">
              <img
                width="60"
                v-if="scope.row.imgURL"
                :src="'http://localhost:3000/images/' + scope.row.imgURL"
                alt
              />
              <img
                width="60"
                v-else
                src="http://localhost:3000/default/default.jpg"
                alt
              />
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="220"
          >
            <template slot-scope="scope">
              <el-button
                type="warning"
                :plain="true"
                @click="updatePro(scope.row._id)"
                class="fl"
              >修改</el-button>
              <el-button
                type="warning"
                :plain="true"
                @click="deletePro(scope.row._id)"
                class="fl"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block product-page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="productsData.currentPage - 0"
          :page-sizes="[3, 4, 5]"
          :page-size="productsData.PageSize - 0"
          layout="total, sizes, prev, pager, next, jumper"
          :total="productsData.total - 0"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import api from "../../../network/apis/api";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "products"
);
export default {
  data() {
    return {
      serachData: {
        type: "name",
        value: "",
      },
    };
  },
  created() {
    this.getAllProducts();
  },
  computed: {
    ...mapState(["productsData"]),
  },

  methods: {
    ...mapActions(["getAllProducts"]),
    ...mapMutations(["setSearchData", "setTOPrevPage"]),

    //改变页面显示条数
    handleSizeChange(val) {
      this.productsData.pageSize = val;
      this.getAllProducts();
    },

    //修改当前页
    handleCurrentChange(val) {
      this.productsData.currentPage = val;
      this.getAllProducts();
    },

    //搜索
    searchEvent() {
      this.setSearchData(this.serachData);
      this.getAllProducts();
    },

    //删除商品
    async deletePro(_id) {
      const { data } = await api.products.deleteProduct({ _id });
      if (data.status) {
        if (
          this.productsData.data.length == 1 &&
          this.productsData.currentPage != 1
        ) {
          this.setTOPrevPage();
          this.getAllProducts();
        } else {
          this.getAllProducts();
        }
      }
    },

    //调到修改界面
    updatePro(_id) {
      this.$router.push("/admin/updateProduct/" + _id);
    },
  },
};
</script>

<style>
#studentList {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
}
#studentList .el-table .cell {
  line-height: 23px;
}
#studentList h1 {
  width: 130px;
  margin-bottom: 10px;
}
.el-table .cell {
  width: 240px;
}
.pagenition {
  margin-top: 30px;
}
.image-size {
  width: 40px;
  height: 40px;
  background-size: 50px 50px;
  border-radius: 50%;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.search {
  width: 1273px;
  margin-top: 20px;
}
.search-box {
  width: 543px;
  padding-left: 690px;
}
.product-page {
  margin-top: 30px;
}
</style>
